<script setup name="Profile">
import { getSchoolOpenInfoByIdCard, getUserProfile, updateStudentStatusByIdCard } from '@/api/system/user';
import { ref, reactive } from 'vue';

const state = reactive({
  studentGrade: '', //学生年级
  studentIdCard: '', //学生身份证号
  phonenumber: '', //学生手机号码
  sex: '',  //学生性别
  studentName: '',  //学生姓名
  studentCollege: '', //录取学院
  studentMajor: '', //录取专业
  studentClass: '', //学生班级
  counsellor: '', //辅导员姓名
  counsellorTel: '', //辅导员号码
  dormitory: '', //宿舍号
});

// 用于在图片src中绑定动态的值
const imgSrc = ref('');

function getSex(sex) {
  const sexMap = {
    0: '男',
    1: '女',
    2: '未填写',
  };
  return sexMap[sex] || '未填写';
}

function getStudentInfo() {
  getUserProfile().then((response) => {
    state.sex = getSex(response.data.sex);
    state.studentIdCard = response.data.userName;
    state.phonenumber = response.data.phonenumber;
  }).then(() => getSchoolOpenInfoByIdCard(state.studentIdCard)).then((response) => {
    state.studentName = response.data.studentName;
    state.studentCollege = response.data.studentCollege;
    state.studentMajor = response.data.studentMajor;
    state.studentGrade = response.data.studentGrade;
    state.studentClass = response.data.studentClass;
    state.counsellor = response.data.counsellor;
    state.counsellorTel = response.data.counsellorTel;
    state.dormitory = response.data.dormitory;
    // 更新 imgSrc 值
    imgSrc.value = `/2024${state.studentCollege}入学安排.jpg`;
  });
}

getStudentInfo();

//点击按钮会触发此函数
function updateStudentStatus() {
  const status = '在校';
  updateStudentStatusByIdCard(state.studentIdCard, status).then((response) => {
    console.log('updateStudentStatus', response);
    // 弹出消息框
    alert('您已报到，欢迎来到美好的大学生活！');
  });
}

</script>

<template>
  <div class="profile-container">
    <h1 class="profile-title">学生信息</h1>

    <div class="profile-item">
      <label class="profile-label">学生姓名：</label>
      <span class="profile-value">{{ state.studentName }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">年级:</label>
      <span class="profile-value">{{ state.studentGrade }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">身份证号:</label>
      <span class="profile-value">{{ state.studentIdCard }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">手机号码:</label>
      <span class="profile-value">{{ state.phonenumber }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">录取学院:</label>
      <span class="profile-value">{{ state.studentCollege }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">录取专业:</label>
      <span class="profile-value">{{ state.studentMajor }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">学生班级:</label>
      <span class="profile-value">{{ state.studentClass }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">班主任:</label>
      <span class="profile-value">{{ state.counsellor }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">班主任手机号码:</label>
      <span class="profile-value">{{ state.counsellorTel }}</span>
    </div>

    <div class="profile-item">
      <label class="profile-label">宿舍号:</label>
      <span class="profile-value">{{ state.dormitory }}</span>
    </div>

    <div class="profile-item">
      <button @click="updateStudentStatus" class="profile-button">点击按钮，确认{{ state.studentName }}本人已到校</button>
    </div>

    <div class="orientation-schedule">
      <p>手机上长按图片，点击保存图片，即可下载入学安排表</p>
      <!-- 动态绑定 img 的 src 属性 -->
      <img :src="imgSrc" :alt="state.studentCollege + '入学安排'">
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  max-width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
}

.profile-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 6vw;
  color: #333;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 4vw;
}

.profile-item:last-child {
  border-bottom: none;
}

.profile-label {
  font-weight: bold;
  color: #555;
}

.profile-value {
  color: #333;
  word-wrap: break-word;
}

.profile-button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  font-size: 4vw;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.profile-button:hover {
  background-color: #0056b3;
}

.orientation-schedule img{
  width: 100%;
}

.orientation-schedule p {
  text-align: center;
  font-weight: bold;
  color: black;
}

@media (min-width: 600px) {
  .profile-container {
    max-width: 600px;
  }

  .profile-title {
    font-size: 24px;
  }

  .profile-item {
    font-size: 16px;
  }

  .profile-button {
    font-size: 16px;
  }
}
</style>
